<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style>
		div{
			<!-- div有宽没高：设置高宽 -->
			width: 300px;
			height: 300px;
			border: 1px solid red;
			/* 盒/框模型：页面任何元素存在于盒模型中
			        组成：外边距+边框+内边距+内容 
				  外边距：margin属性与border属性方向用法一致
				    语法：属性值1个，代表四个方向，顺时针：上 右 下 左
					     属性值2个，代表四个方向，顺时针：上下 右左
						                    自适应居中: 0 auto
						 属性值3个，代表四个方向，顺时针：上 右左 下
						 属性值4个，代表四个方向，顺时针：上 右 下 左
				外边距-方向属性:
				margin-left:数值px
				margin-right:数值px
				margin-top:数值px
				margin-bottom:数值px
				  */
		    margin: 100px;/*上 右 下 左  */
			margin: 10px  100px;/* 上下 右左 */
			margin: 10px 20px 100px;/*上 右左 下  */
			margin: 10px 20px 30px 100px;/* 上 右 下 左  */
			/* 自适应居中 */
			margin: 0 auto;
			/* 元素向下移动100个像素 */
			margin-top: 100px;
			/* 内边距：padding属性与margin属性使用方法类似
			   特点：边框与内容之间距离，撑开适用于精灵图
			   语法：属性值1个，代表四个方向，顺时针：上 右 下 左
					属性值2个，代表四个方向，顺时针：上下 右左
				    属性值3个，代表四个方向，顺时针：上 右左 下
					属性值4个，代表四个方向，顺时针：上 右 下 左
				内边距-方向与外边距-方向使用方法一致
			 */
			padding: 50px;
			padding: 50px 100px;/* 使用率:精灵图 */
			padding: 50px 100px 200px;
			padding: 50px 100px 200px 300px;
			
		}</style>
	</head>
	<body>
		<div></div>
	</body>
</html>